import React, { Component } from 'react';

import {NavigationStyled} from './StyledNavigation'
import { withRouter } from 'react-router-dom'


class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {  }
  }
  render() { 
    // console.log(this.props)
    return ( 
      <NavigationStyled {...this.props}>
        <>{
          (this.props.statusBarHeight || this.props.showStatusBar)?<div className="statusBar"></div>:""
        }</>

        <div className="nav">
          <>{
            (this.props.leftTitle || this.props.leftImg)?
              <div className="left" 
              // onClick={() => this.onHandleLeftBtn()}
              onClick={ () => this.props.clickLeft?this.props.clickLeft():'' }
              >
                <>{
                  this.props.leftImg?
                  <img src={this.props.leftImg} alt=""/>   
                  :""
                }</>
                {this.props.leftTitle}

              </div>
            :''
          }</>

          {this.props.children}

          <>{
            this.props.title? <div className="title">{this.props.title}</div> :""
          }</>

          <>{
            (this.props.rightTitle || this.props.rightImg)?
              <div className="right" 
              // onClick={() => this.props.onClickright()}
              onClick={ () => this.props.clickRight?this.props.clickRight():'' }
              >
                {this.props.rightTitle}
                <>{
                  this.props.rightImg?
                    <img src={this.props.rightImg} alt=""/>   
                    :""
                }</>

              </div>
            :''
          }</>

        </div>
        

      </NavigationStyled>
    );
  }
  onHandleLeftBtn = ()=>{
    // console.log(this.props)
    this.props.history.go(-1)
  }
}
 
export default withRouter(Navigation) ;